<template>
  <div class="user-center">
      <h1 class="center-head">用户中心</h1>
      <div class="user-id">账号<span>{{userInfo.account}}</span></div>
      <div class="user-id">身份<span>{{menberInfo}}</span></div>

      <div class="vip-card" v-for="item in vipCardList" :key="item.vipTitle">
          <div class="vip-level">
              <p class="level-title">{{item.vipTitle}}</p>
              <p><span class="price">{{item.vipPrice}}</span> <span class="days">/30天</span></p>
          </div>
          <button class="buy-btn" @click="buy(item)">购买</button>
      </div>

  </div>
</template>

<script>
import store from '../store';
import {mapGetters,mapState} from 'vuex'
export default {
    name:'userCenter',
    data(){
        return{
            vipCardList:[
                {
                    vipLevel:0,
                    userStatus:1,
                    vipTitle:"VIP会员",
                    vipPrice:"10.00元"
                },
                 {
                    vipLevel:1,
                    userStatus:2,
                    vipTitle:"高级VIP1会员",
                    vipPrice:"50.00元",
                },
                 {
                    vipLevel:2,
                    userStatus:2,
                    vipTitle:"高级VIP2会员",
                    vipPrice:"100.00元"
                }, {
                    vipLevel:9,
                    userStatus:2,
                    vipTitle:"高级VIP9会员",
                    vipPrice:"1000.00元"
                }, {
                    vipLevel:12,
                    userStatus:2,
                    vipTitle:"高级VIP12会员",
                    vipPrice:"2000.00元"
                }
            ]
        }
    },
    computed:{
        ...mapGetters(['menberInfo']),
        ...mapState(['userInfo'])
    },
    methods:{
        
        buy(e){
            if(e.vipLevel <= this.$store.state.vipLevel){
                this.$toast({
                    type:'html',
                    message: "您当前是"+this.menberInfo+",不可购买低于当前等级的VIP",
                    transition:'index-van-fade-leave-active'
                });  
                return 
            }
            
            store.dispatch('buyVip',e).then(res=>{
                this.$toast({
                    type:'success',
                    message: res,
                    transition:'index-van-fade-leave-active'
                });            
            })
        }
    },
    created(){
        this.$toast.clear(true);
    }
}
</script>

<style lang="scss" scoped>
@function p2r($px){
    @return ($px/40px)*1rem
}
.user-center{
    width: 100%;
    position: relative;
    padding: p2r(60px) p2r(30px) p2r(140px) p2r(30px); 
    box-sizing: border-box;
    .center-head{
        font-weight: bold;
        font-size: p2r(48px);
        letter-spacing: 4px;
    }
    .user-id{
        width: 100%;
        padding: p2r(20px) 0;
        text-align: left;
        position: relative;
        font-size: p2r(32px);
        border-bottom: 1px solid #eee;
        span{
            float: right;
        }
    }
    .vip-card{
        width: 100%;
        padding: p2r(20px) p2r(16px);
        box-sizing: border-box;
        border-radius: 4px;
        background-color: #a95f29;
        display: flex;
        justify-content: space-between;
        margin: p2r(30px) 0;
        box-shadow: 1px 1px 5px 2px rgba(133,60,84,0.5);
        .vip-level{
            text-align: left;
            color: #fff;
            .level-title{
                font-size: p2r(32px);
                margin-bottom: p2r(20px);
            }
            .price{
                font-size: p2r(40px);
                color: rgb(231, 191, 9);
                margin-right: p2r(10px);
            }
            .days{
                font-size: p2r(24px);
                letter-spacing: 2px;
            }
        }
        .buy-btn{
            outline: none;
            border: 1px solid #fff;
            box-sizing: border-box;
            width: p2r(120px);
            height: p2r(80px);
            color: #fff;
            font-size: p2r(32px);
            margin-top: p2r(28px);
            background: none;
            border-radius: 4px;
        }
    }
}



</style>